<!--
 * @FilePath: /fxfzywpt/src/views/uncertain/test.vue
 * @Description: 
-->
<template>
  <div style="width: 100%; height: 100%; position: relative">
    <div id="map"></div>
  </div>
</template>

<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import * as olProj from 'ol/proj';
import Draw from 'ol/interaction/Draw';
import Overlay from 'ol/Overlay';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import Feature from 'ol/Feature';
import { Point, MultiLineString, LineString, Polygon } from 'ol/geom';
import { fromLonLat } from 'ol/proj';
import Circle from 'ol/geom/Circle';
import { ScaleLine, defaults as defaultControls } from 'ol/control';
import { circular } from 'ol/geom/Polygon';
import * as olSphere from 'ol/sphere';
import LinearRing from 'ol/geom/LinearRing';
import { getTransform } from 'ol/proj';
import { getArea, getLength, getDistance } from 'ol/sphere';
import { unByKey } from 'ol/Observable';
import WMTS from 'ol/source/WMTS';
import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';
import TileWMS from 'ol/source/TileWMS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import * as olExtent from 'ol/extent';
import GeoJSON from 'ol/format/GeoJSON';
import Text from 'ol/style/Text';

var map = null; // /地图实例
var view = null; // 视图实例

export default {
  name: 'Home',
  components: {},
  data() {
    return {};
  },

  mounted() {
    this.initMap();
  },

  methods: {
    // 初始化地图
    initMap() {
      // 实例化Map
      map = new Map({
        // 创建一个地图
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: 'map',
        view: new View({
          center: fromLonLat([116.403218, 39.92372]),
          zoom: 15,
          constrainResolution: true, // 设置缩放级别为整数
          smoothResolutionConstraint: false, // 关闭无级缩放地图
        }),
      });

      view = map.getView();
      // 加载圆形
      this.addPoint();
    },

    // 绘制圆
    addPoint() {
      let sites = [
        {
          site: [116.400819, 39.916263],
          name: '覆盖物1',
        },
        {
          site: [116.450819, 39.917263],
          name: '覆盖物2',
        },
        {
          site: [116.350819, 39.857263],
          name: '覆盖物3',
        },
      ];
      let features = [];
      sites.forEach((item, index) => {
        let feature = new Feature({
          title: item.name,
          geometry: new Circle(fromLonLat(item.site), this.getRadius(2000)),
        });
        feature.setStyle(
          new Style({
            fill: new Fill({
              color: 'rgba(32, 157, 230, 1)',
            }),
          })
        );
        features.push(feature);
      });
      let source = new VectorSource();
      source.addFeatures(features);
      let layer = new VectorLayer({
        opacity: 0.2,
      });
      layer.setSource(source);
      map.addLayer(layer);
      this.addLabel();
      this.addLink();
    },

    // 添加标识
    addLabel() {
      let sites = [
        {
          site: [116.400819, 39.916263],
          name: '覆盖物1',
        },
        {
          site: [116.450819, 39.917263],
          name: '覆盖物2',
        },
        {
          site: [116.350819, 39.857263],
          name: '覆盖物3',
        },
      ];
      let features = [];
      sites.forEach((item, index) => {
        let feature = new Feature({
          title: item.name,
          geometry: new Point(fromLonLat(item.site)),
        });
        feature.setStyle(
          new Style({
            text: new Text({
              textAlign: 'center', //位置
              textBaseline: 'middle', //基准线
              font: 'normal 17px 微软雅黑', //文字样式
              text: item.name, //文本内容
              fill: new Fill({
                //文本填充样式（即文字颜色)
                color: 'red',
              }),
            }),
          })
        );
        features.push(feature);
      });

      let sourceLabel = new VectorSource();
      sourceLabel.addFeatures(features);
      let layerLabel = new VectorLayer({
        opacity: 1,
      });
      layerLabel.setSource(sourceLabel);
      map.addLayer(layerLabel);
    },

    // 添加连线
    addLink() {
      let sites = [
        {
          site: [116.400819, 39.916263],
          name: '覆盖物1',
        },
        {
          site: [116.450819, 39.917263],
          name: '覆盖物2',
        },
        {
          site: [116.350819, 39.857263],
          name: '覆盖物3',
        },
      ];
      sites.push(sites[0]);
      let linkData = [];
      sites.forEach((item) => {
        linkData.push(fromLonLat(item.site));
      });
      let features = [];

      let featureLine = new Feature({
        geometry: new LineString(linkData),
      });
      let lineStyle = new Style({
        stroke: new Stroke({
          color: '#000',
          lineDash: [10, 10, 10, 10], // 重点在这
          width: 2,
        }),
      });
      // 添加线的样式
      featureLine.setStyle(lineStyle);
      features.push(featureLine);

      let distanceList = [];
      for (let index = 0; index < sites.length - 1; index++) {
        let site = fromLonLat([
          (sites[index].site[0] + sites[index + 1].site[0]) / 2,
          (sites[index].site[1] + sites[index + 1].site[1]) / 2,
        ]);
        let length = getDistance(sites[index].site, sites[index + 1].site);
        distanceList.push({
          site,
          length,
        });
      }

      distanceList.forEach((item) => {
        let feature = new Feature({
          title: '这是测试用的',
          geometry: new Point(item.site),
        });
        feature.setStyle(
          new Style({
            text: new Text({
              textAlign: 'center', //位置
              textBaseline: 'middle', //基准线
              font: 'normal 12px 微软雅黑', //文字样式
              text: item.length.toFixed(0) + 'm', //文本内容
              padding: [1, 1, 1, 1],
              backgroundFill: new Fill({
                //文本填充样式（即文字颜色)
                color: '#d5e2f9',
              }),
              fill: new Fill({
                //文本填充样式（即文字颜色)
                color: 'red',
              }),
            }),
          })
        );
        features.push(feature);
      });

      let sourceLink = new VectorSource();
      sourceLink.addFeatures(features);
      let layerLink = new VectorLayer();
      layerLink.setSource(sourceLink);
      map.addLayer(layerLink);
    },

    // 半径计算
    getRadius(radius) {
      let metersPerUnit = map.getView().getProjection().getMetersPerUnit();
      let circleRadius = radius / metersPerUnit;
      return circleRadius;
    },
  },
};
</script>
<style scoped>
#map {
  width: 100%;
  height: 100%;
  background-color: azure;
}
</style>

<style scoped>
/* /deep/.ol-tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
  font-size: 12px;
  cursor: default;
  user-select: none;
}

/deep/.ol-tooltip-measure {
  opacity: 1;
  font-weight: bold;
}

/deep/.ol-tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}

/deep/.ol-tooltip-measure:before,
/deep/.ol-tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}

:deep(.ol-tooltip-static:before) {
  border-top-color: #ffcc33;
} */
</style>
